绘制图形步骤

• 在 HTML5 页面中添加 canvas 元素，必须定义 canvas 元素的 id 属性值以便接下来调用
• 使用 id 寻找 canvas 元素。在 JavaScript 代码中使用 document.getElementById 等方法，利用先前在 canvas 元素中指定的 id 来寻找 Canvas
• 通过 canvas 元素的 getContext 方法来获取其上下文（ Context ），即创建 Context 对象，以获取允许进行绘制的 2D 环境 (getContext("2d") 是用于返回一个内建的 HTML5 对象（ CanvasRenderingContext2D 对象），使用该对象可在 canvas 元素中绘制图形 )
• 使用 JavaScript 进行绘制

使用以下代码可以绘制一个位于画布中央的矩形。

var c = document.getElementById('this_l_c');
var context = c.getContext('2d');
context.fillStyle = '#ff00ff';
context.fillRect(25, 25, 100, 200);

var c = document.getElementById('this_l_c');
var context = c.getContext('2d');
context.fillStyle = '#ff00ff';
context.fillRect(25, 25, 100, 200);

fillRect 有四个参数 , 前两个是初始坐标 , 后两个表示宽和高。